﻿@using xConnected.Common.Login
@using xConnected.Common.ExpertProfile
<div>
    <div data-bind="with:profile">
        <div data-bind="with: workingProfile">
            <div class="well">
                <div class="row-fluid">
                    <div class="pull-right">
                        <a class="btn btn-small" data-bind="visible: $root.profile.editDeleteNewButton, click: function(){ $root.profile.selectEdit($root.profile.workingProfile()); }">
                            <i class="icon-pencil"></i>
                        </a>
                        <a data-bind="visible: $root.profile.editDeleteNewButton" style="margin-right: 5px;" class="btn btn-small" data-toggle="modal" href="#DeleteDialog"><i class="icon-trash"></i></a>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3"><img class="img-rounded" data-bind="attr: {src: $data.Photo150X150()}" alt="Photo"></div>
                    <h3 id="NameProfileViewMode" data-bind="text: Title" class="span6"></h3>
                    <div data-bind="html: Description" class="span6"></div>
                </div>
            </div>
            <div>
                <hr/>
                <span style="font-size: large">Personal information</span>
                <hr/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Country</strong></span>
                <span class="span6" data-bind="with:Country"><span data-bind="text:Description"></span></span>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Location </strong></span>
                <span data-bind="text: Location" class="span6"></span>
            </div>
        </div>
    </div>
    <div class="row-fluid" style="margin-top: 5px">
        <div style="height: 150px; width: 250px; margin-left: 296px; margin-bottom: 10px" id="locationProfileViewMode"></div>
    </div>
    <div data-bind="with:profile">
        <div data-bind="with: workingProfile">
            <div class="row">
                <span class="span3"><strong>@Resources.AvailabilityStatus</strong></span>
                <span data-bind="text: AvailabilityStatusText" class="span6"></span>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.CommentAvailability</strong></span>
                <span data-bind="html: Availability" class="span6"></span>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.JobTypes</strong></span>
                <div class="span6" data-bind="foreach: $root.profile.jobTypes" class="btn-toolbar">
                    <button class="btn btn-mini"><span data-bind="text: Description"></span></button>
                </div>
            </div>
            <div class="row" data-bind="visible: $root.profile.hourlyDailyRatesVisible">
                <span class="span3" ><strong>@Resources.HourlyDailyRate </strong></span>
                <span class="span6"><span data-bind="text: HourRate"></span>€ / <span data-bind="text: DailyRate"></span>€</span>
            </div>
            <div class="row" data-bind="visible: $root.profile.annualRatesVisible">
                <span class="span3" ><strong>@Resources.MonthlyAnnualRate </strong></span>
                <span class="span6"><span data-bind="text: MonthlyRate"></span>€ / <span data-bind="text: AnnualRate"></span>€</span>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.CommentRate</strong></span>
                <span data-bind="text: CommentRate" class="span6"/>
            </div>
            <div>
                <hr/>
                <span style="font-size: large; margin-top: 20px">Skills</span>
                <hr/>
            </div>
            <div class="row" style="margin-bottom: 10px;">
                <span class="span3"><strong>@Resources.Industry</strong></span>
                <span class="span6" data-bind="with: Industry"><span data-bind="text: Description"></span></span>
            </div>
            <div class="row">
                <div class="span3">
                    <span><strong>@Resources.CategorySkills</strong></span>
                </div>
                <div class="span6">
                    <ul class="thumbnails" data-bind="foreach: CategorySkills">
                        <li class="span2">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid" data-bind="with: Category">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Category: </span><span data-bind=" text: Description" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Experience: </span><span data-bind=" text: ExperienceText" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="span3">
                    <span><strong>@Resources.TechnologySkills</strong></span>
                </div>
                <div class="span6">
                    <ul class="thumbnails" data-bind="foreach: TechnologySkills">
                        <li class="span2">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid" data-bind="with: Technology">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Technology: </span><span data-bind=" text: Name" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: Level" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Experience: </span><span data-bind=" text: Experience" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="span3">
                    <span><strong>@Resources.EducationSkills</strong></span>
                </div>
                <div class="span6">
                    <ul class="thumbnails" data-bind="foreach: EducationSkills">
                        <li class="span2">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Program: </span><span data-bind=" text: Program" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.University: </span><span data-bind=" text: University" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid" data-bind="with: Education">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Degree: </span><span data-bind=" text: Description" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="span3">
                    <span><strong>@Resources.LanguageSkills</strong></span>
                </div>
                <div class="span6">
                    <ul class="thumbnails" data-bind="foreach: LanguageSkills">
                        <li class="span2">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid" data-bind="with: Language">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Language: </span><span data-bind=" text: Description" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: Level" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <hr/>
                <span style="font-size: large; margin-top: 20px">About me</span>
                <hr/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Abilities</strong></span>
                <span data-bind="html: Experience" class="span6"></span>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.References</strong></span>
                <span data-bind="html: References" class="span6"></span>
            </div>
            
            <div class="row">
                <span class="span3"><strong>@Resources.Other</strong></span>
                <span data-bind="html: Other" class="span6"></span>
            </div>
            <div>
                <hr/>
                <span style="font-size: large; margin-top: 20px">@Resources.Attachments</span>
                <hr/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Cv </strong></span>
                <div class="span6"><a data-bind="attr: { href: Cv}"><span data-bind="text: $root.profile.cvShort" /></a></div>
            </div>
            <hr/>
            <span style="font-size: large; margin-top: 20px">@Resources.ContactInformation</span>
            <hr/>
            <div class="row">
                <span class="span3"><strong>@Resources.PhoneNumber</strong></span>
                <span data-bind="text: PhoneNumber" class="span6"/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Login.Email </strong></span>
                <span data-bind="text: Email" class="span6"></span>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Website </strong></span>
                <a href="#" data-bind="text: Website, attr: {href: Website}" class="span6"></a>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Skype </strong></span>
                <span data-bind="text: Skype" class="span6"/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Facebook </strong></span>
                <span data-bind="text: Facebook" class="span6"/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Twitter </strong></span>
                <span data-bind="text: Twitter" class="span6"/>
            </div>
            <div class="row">
                <span class="span3"><strong>@Resources.Linkedin </strong></span>
                <span data-bind="text: Linkedin" class="span6"/>
            </div>
            <hr/>
        </div>
    </div>
</div>